<template>
    <div class="withdraw bg-white-pk font-size-14-pk">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="余额提现"
                    right-text="提现明细"
                    left-arrow
                    @click-right="rightBtn"
                    @click-left="toBack">
            </van-nav-bar>
        </div>
        <div class="text-center-pk text-black-pk page-pad-pk moneyHead">
            <div class="font-size-18-pk">￥{{allMoney}}</div>
            <div class="">可提现余额</div>
        </div>
        <div class="page-pad-pk">
            <div class="font-size-15-pk">提现金额</div>
            <div class="withdrawWrap d-flex-pk light-border-bottom-pk">
                <div class="moneyIcon">￥</div>
                <div class="flex-grow-1">
                    <van-field v-model="withdrawForm.money" placeholder="最低可提现5元"></van-field>
                </div>
                <div class="withdrawAll" @click="handleWithdrawAll">
                    全部提现
                </div>
            </div>
        </div>
        <div class="page-pad-pk list-item-pad-pk">
            <div class="d-flex-pk payWay" @click="alipayBtn(1)">
                <div class="itemAlipay">
                    <img src="../../assets/images/alipayIcon.png" alt="img" />
                </div>
                <div class="flex-grow-1">支付宝提现</div>
                <div v-show="successAplipay">
                    <van-icon name="success" color="#D82D11" />
                </div>
            </div>
            <div class="d-flex-pk payWay" @click="cardBtn(4)">
                <div class="itemAlipay">
                    <img src="../../assets/images/bankcard.png" alt="img" />
                </div>
                <div class="flex-grow-1">银行卡提现</div>
                <div v-show="successCard">
                    <van-icon name="success" color="#D82D11" />
                </div>
            </div>
            <div v-show="alipayShow">
                <div class="d-flex-pk payWay">
                    <div class="itemLeft">
                        <div>账号</div>
                    </div>
                    <div>
                        <van-field v-model="withdrawForm.aliAccount" placeholder="请输入到账支付宝账号"/>
                    </div>
                </div>
                <div class="d-flex-pk payWay">
                    <div class="itemLeft">
                        <div>真实姓名</div>
                    </div>
                    <div>
                        <van-field v-model="withdrawForm.name"  placeholder="请输入支付宝认证的真实姓名"/>
                    </div>
                </div>
            </div>
            <div v-show="cardShow">
                <div class="d-flex-pk payWay">
                    <div class="itemLeft">
                        <div>卡号</div>
                    </div>
                    <div>
                        <van-field v-model="withdrawForm.cardNum" placeholder="请输入到账银行卡卡号"/>
                    </div>
                </div>
                <div class="d-flex-pk payWay">
                    <div class="itemLeft">
                        <div>类型</div>
                    </div>
                    <div>
                        <van-field v-model="withdrawForm.bank" placeholder="请输入开户行"/>
                    </div>
                </div>
                <div class="d-flex-pk payWay">
                    <div class="itemLeft">
                        <div>真实姓名</div>
                    </div>
                    <div>
                        <van-field v-model="withdrawForm.name" placeholder="请输入银行卡认证的真实姓名"/>
                    </div>
                </div>
            </div>
            <div class="footerWrap text-center-pk">
                <div class="sureBtn" @click="submitWithdraw">确认提现</div>
            </div>
            <div class="pswdForm">
                <van-popup closeable v-model="pswdShow" :style="{ height: '120px',width:'80%' }">
                    <div class="page-pad-pk list-item-pad-pk updatePswd text-center-pk">
                        <div>输入支付密码</div>
                        <div class="d-flex-pk itemWrap">
                            <div class="itemName">
                                <van-field type="password" v-model="withdrawForm.payPassword" placeholder="请输入密码" />
                            </div>
                            <div class="sendBtn bg-D82D11" @click="submitPswd">
                                确定
                            </div>
                            <div class="sendBtn bg-gray" @click="pswdShow=false">
                                取消
                            </div>
                        </div>
                    </div>
                </van-popup>
            </div>
        </div>
    </div>
</template>
<script>
    const withdrawForm = {
        "aliAccount": "",
        "bank": "",
        "cardNum": "",
        "money": "",
        "name": "",
        "payPassword": "",
        "userKey": "",
        "withdrawalType": ""
    };
    export default {
        name:"withdraw",
        data(){
            return{
                withdrawType:"",
                pswdShow:false,
                successAplipay:false,
                alipayShow:false,
                cardShow:false,
                successCard:false,
                tokenKey: "",
                userKey: "",
                userInfo:{},
                allMoney:0,
                withdrawForm: withdrawForm,
            }
        },

        created() {
            this.getUserInfo();
        },
        methods:{
            toBack(){
              this.$router.push({
                  name:'remainMoney'
              })
            },
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.userInfo=result;
                        this.allMoney = this.userInfo.money;
                    }
                })
            },
            //全部提现
            handleWithdrawAll() {
                this.withdrawForm.money = this.allMoney;
            },
            alipayBtn(index){
                this.withdrawType=index;
                this.alipayShow=true;
                this.successAplipay=true;
                this.cardShow=false;
                this.successCard=false;
            },
            cardBtn(index){
                this.withdrawType=index;
                this.alipayShow=false;
                this.successAplipay=false;
                this.cardShow=true;
                this.successCard=true;
            },
            //提交提现
            getWithdraw(){
               if(this.withdrawType==="" || this.withdrawType==null){
                   this.$toast({
                       message: '请选择提现方式',
                   });
               }else{
                  if(this.withdrawType==='1'){
                      this.$toast({
                          message:"支付宝提现"
                      })
                  }
                  if(this.withdrawType==='4'){
                      if (this.withdrawForm.money && this.withdrawForm.cardNum && this.withdrawForm.bank && this.withdrawForm.name) {
                          this.$api.getDynamicSecretKey().then(res => {
                              let result = this.$resData(res);
                              if (result) {
                                  this.tokenKey = result.tokenKey;
                                  this.userKey = result.userKey;
                                  this.pswdShow=true;
                              }
                          })
                      } else {
                          this.$toast({
                              message: '请填写完整',
                          });
                      }
                  }
               }
            },
            submitWithdraw() {
                let that = this;
                if (that.stopClickWithdraw) {
                    this.$toast({
                        message: '请不要点击多次',
                    });
                    return false
                }
                that.stopClickWithdraw = true;
                setTimeout(() => {
                    that.stopClickWithdraw = false;
                    this.getWithdraw();
                }, 1000)
            },
            //提交密码
            submitPswd(){
                let password = this.$util.encrypt(this.withdrawForm.payPassword, this.tokenKey);
                this.$api.withdrawApp({
                    "bank": this.withdrawForm.bank,
                    "cardNum": this.withdrawForm.cardNum,
                    "money": this.withdrawForm.money,
                    "name": this.withdrawForm.name,
                    "payPassword": password,
                    "userKey": this.userKey,
                    "withdrawalType": this.withdrawType,
                }).then(res => {
                    let result = this.$resResult(res);
                    if (result) {
                        this.$toast({
                            message: '申请成功',
                        });
                        this.withdrawForm.payPassword="";
                    }else{
                        this.$toast({
                            message: '密码错误',
                        });
                        this.withdrawForm.payPassword="";
                    }
                    this.pswdShow=false;
                    this.getUserInfo();
                });
            },
            rightBtn(){
                this.$router.push({
                    name:"withdrawList"
                })
            }
        },
    }
</script>
<style lang="scss" scoped>
    .withdraw{
        line-height: 1.8;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .moneyHead{
            padding-top: 60px;
        }
        .withdrawWrap{
            padding: 10px 0;
            align-items: center;
            .withdrawAll{
                border: 1px solid #25B4E9;
                color: #25B4E9;
                padding:2px 4px;
            }
            .moneyIcon{
                font-size: 24px;
            }
        }
        .payWay{
            align-items: center;
            border-bottom: 1px solid #EDEDED;
            .itemAlipay{
                padding-right: 10px;
                img{
                    width: 40px;
                    height: 40px;
                }
            }
        }
        .footerWrap{
            padding-top: 20px;
            margin: 10px 20px;
            .sureBtn{
                border-radius: 5px;
                background-color: #D82D11;
                padding: 5px;
                color: white;
            }
        }
        .pswdForm{
            .van-popup--center {
                top: 300px;
                border-radius: 10px;
            }
            .updatePswd{
                .van-cell{
                    padding: 6px 16px;
                    color: #323233;
                    line-height: 20px;
                    background: none;
                }
                .itemWrap{
                    padding: 10px 0;
                    align-items: center;
                    .itemName{
                        width: 70%;
                        border: 1px solid #999999;
                        border-radius: 5px;
                    }
                    .sendBtn{
                        width:15%;
                        margin-left: 5px;
                        padding: 0 5px;
                        color: #fff;
                        border-radius: 5px;
                    }
                }
                .sureBtn{
                    border-radius: 5px;
                    background-color: #D82D11;
                    padding: 3px;
                    color: white;
                }
                .bg-gray{
                    background-color: #999;
                }
                .inputItem{
                    border: 1px solid #999999;
                    border-radius: 5px;
                    margin-bottom: 10px;
                }

            }
        }
    }
</style>
